<template>
  <view class="box">
    <!-- <uni-popup ref="popup" type="bottom"> -->
    <view class="header">
      <image :src="$img('/static/img2/cc188.png')"></image>
    </view>
    <view class="content">
      <view>申请获取以下权限</view>
      <text>获得您的手机号</text>
    </view>
    <!-- type='primary' -->
    <view
      class="bottom relative c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc78.png')})`
      }"
    >
      <button
        class="hide"
        withCredentials="true"
        lang="zh_CN"
        type="primary"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
      ></button>

      授权手机号
    </view>

    <view
      class="quxiao c_bg"
      type="primary"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc78.png')})`
      }"
      @click="back()"
    >
      取消
    </view>
    <!-- </uni-popup> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2
    }
  },
  created() {
    //默认加载
    // this.login();
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    getPhoneNumber(e) {
      // console.log(e)
      let that = this
      uni.login({
        success(res) {
          // console.log(res)
          uni.checkSession({
            success() {
              that.req({
                url: 'login_bind_mobile',
                data: {
                  code: e.detail.code,
                  encryptedData: e.detail.encryptedData,
                  iv: e.detail.iv
                },
                success(res) {
                  if (res.status == 1) {
                    // uni.setStorageSync('token', res.data)
                    uni.showToast({
                      title: '绑定成功~',
                      icon: 'success',
                      success() {
                        setTimeout(() => {
                          uni.navigateBack()
                        }, 1000)
                      }
                    })
                  }
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
/* .box {
		position: fixed;
		bottom: 0;
	} */

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #333;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
  color: #fff;
}

.content text {
  display: block;
  margin-top: 40rpx;
}

.bottom {
  margin: 70rpx 50rpx;
  width: 650rpx;
  height: 78rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 光良酒-干杯体, 光良酒-干杯体;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
  text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
    0 0 2px #000000;
}

.quxiao {
  filter: grayscale(1);
  width: 650rpx;
  height: 78rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;

  font-family: 光良酒-干杯体, 光良酒-干杯体;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
  text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
    0 0 2px #000000;
}
</style>
